<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<style>
    .el-input-item {
        width: 260px;
    }

</style>
<div id="app">
    <template>
        <el-form :model="formData" ref="formData" :rules="rules" label-width="100px"
                 style="margin-top: 5%;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;justify-content: space-between;margin-right: 5%">
            <el-form-item label="商品名称" prop="name">
                <el-input class="el-input-item" size="small" v-model="formData.name"
                          placeholder="请输入商品名称"/>
            </el-form-item>
            <el-form-item label="商品分类" prop="classId">
                <el-cascader
                        v-model="formData.classId"
                        :options="classOptions"
                        :props="{value:'id',label:'className',checkStrictly:true}"
                        size="mini"
                        :checkStrictly="true"
                        @change="handelChange"
                        ></el-cascader>
            </el-form-item>
            <el-form-item label="商品介绍" prop="introduce">
                <el-input class="el-input-item" size="small" v-model="formData.introduce"
                          placeholder="请输入商品介绍"/>
            </el-form-item>
            <el-form-item label="商品规格" prop="spec">
                <el-input class="el-input-item" size="small" v-model="formData.spec"
                          placeholder="请输入商品规格"/>
            </el-form-item>
            <el-form-item label="商品售价" prop="price">
                <el-input class="el-input-item" size="small" v-model="formData.price"
                          placeholder="请输入商品售价"/>
            </el-form-item>
            <el-form-item label="商品原价" prop="sellPrice">
                <el-input class="el-input-item" size="small" v-model="formData.sellPrice"
                          placeholder="请输入商品原价"/>
            </el-form-item>
            <el-form-item label="图片" prop="picture">
                <el-upload class="avatar-uploader el-input-item" :action="uploadUrl" :headers="uploadHeaders" :data="uploadData" accept=".jpg,.png,.jpeg,.gif"
                           :show-file-list="true"
                           :on-success="handleAvatarSuccess.bind(this,'head')" :before-upload="beforeAvatarUpload">
                    <img v-if="formData.picture" :src="formData.picture" class="avatar"style="width:200px;height: 200px">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div style="text-align: center;margin-top: 5%">
            <el-button size="small" @click="closePage">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>

        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/admin/sysProduct.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    let id = getQueryString("id");

    new Vue({
        el: '#app',
        data() {
            return {
                dialogVisible: false,
                // 消息状态字典
                statusOptions: [],
                formData: {},
                rules: {},
                flOptions:[],
                storeOptions:[],
                classOptions:[],
                uploadUrl: '/common/upload/file',
                uploadHeaders: '',
                uploadData: {'module': '1'},
                status:status,
            }
        },
        created() {
            if (id) {
                detail(id).then((res) => {
                    if (res.code === '200') {
                        this.formData = res.data;
                        this.formData.classId = this.formData.classId.split(',');
                        getDicts("product_status").then(response => {
                            this.statusOptions = response.data;
                        });
                    }
                });
            } else {
                this.formData = {};
                getDicts("product_status").then(response => {
                    this.statusOptions = response.data;
                });
            }
            // 在这里调用查询产品分类列表
            let queryParam = {
            };
            pageList2(queryParam).then(res => {
                console.log(res)
                this.classOptions = res.data;
            })
        },
        methods: {
            handleAvatarSuccess(idx, res, file, name) {
                if (res.code === '200') {
                    console.log(res);
                    this.formData.picture = res.data;
                    this.uploadData = [{url:res.data}]
                }
            },
            beforeAvatarUpload(file) {
                let isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过2MB!');
                }
                return isLt2M;
            },
            handleSubmit() {
                if (id) {
                    this.formData.classId = this.formData.classId.join(',');
                    addOrUpdate('/admin/sysProduct/update', this);
                } else {
                    this.formData.classId = this.formData.classId.join(',');

                    addOrUpdate('/admin/sysProduct/add', this);
                }
            },
            handelChange(item){
                console.log(item)
            }
        }
    });
</script>
</html>
